<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <!-- <text class="title">{{ env_title }}</text> -->
    </view>
    <view @click="toCoupon">优惠券</view>
    <view @click="toCouponSelect">优惠券选择</view>
    <view @click="toHelp">帮助中心</view>
    <view @click="toRecommend">推广奖励</view>

    <view class="lang-changer">
      <view class="lang-item" :class="{'active': curLang === 'zh-Hans'}" @click="changeLang('zh-Hans')">Hans</view>
      <view class="lang-item" :class="{'active': curLang === 'zh-Hant'}" @click="changeLang('zh-Hant')">Hant</view>
      <view class="lang-item" :class="{'active': curLang === 'en'}" @click="changeLang('en')">EN</view>
      <view class="lang-item" :class="{'active': curLang === 'japanese'}" @click="changeLang('japanese')">japanese</view>
    </view>
    <view>{{ $t('index.test') }}</view>
    <view @click="moudleTest">moudle_test</view>
    <view @click="testPicker">日期插件测试</view>
    <view @click="testPicker1">up-picker</view>
    <view @click="copy">内容复制测试</view>
    <up-datetime-picker
      :show="showStartPicker"
      v-model="startTime"
      mode="datetime"
      cancelText="111"
      @confirm="onStartTimeChange"
      @cancel="onBack"
    ></up-datetime-picker>
    <!-- 日期选择器 -->
    <!-- <picker mode="date" 
      :value="date" 
      start="2015-09-01" 
      end="2020-09-01" 
      @change="bindDateChange">
      <view class="picker">
        当前选择: {{date}}
      </view>
    </picker> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { test } from '@/utils/index'
import { useI18n } from 'vue-i18n'
import upInput from "uview-plus/components/u-input/u-input.vue"
import upDatetimePicker from "uview-plus/components/u-datetime-picker/u-datetime-picker.vue"


const i18n = useI18n()

const showPicker = ref(false)
// 时间选择框的值
const defaultTime = ref('')
// 当前操作的时间类型
const pickerType = ref<'start' | 'end'>('start')
// 开始时间
const startTime = ref('')
// 结束时间
const endTime = ref('')

/**
 * picker1
 */
const showStartPicker = ref(false)
const onStartTimeChange = (e: any) => {
  console.log(e)
  showStartPicker.value = false
}
const onBack = () => {
  showStartPicker.value = false
}

/**
 * picker2
 */
const date = ref('')
const bindDateChange = (e: any) => {
  date.value = e.target.value
}
console.log("----------", test)
console.log(import.meta.env)

// 时间选择器
const onPickerOk = (data: any) => {
  const { year, month, day } = data
  const timeString = `${year}-${month}-${day}`
  if (pickerType.value === 'start') {
    startTime.value = timeString
  } else {
    endTime.value = timeString
  }
}

const title = ref('Hello')

const toCoupon = () => {
  uni.navigateTo({
    url: '/packageA/coupons/index'
  })
}
const toCouponSelect = () => {
  uni.navigateTo({
    url: '/packageA/couponSelect/index'
  })
}
const toHelp = () => {
  uni.navigateTo({
    url: '/packageB/help/index'
  })
}
const toRecommend = () => {
  uni.navigateTo({
    url: '/packageB/recommend/index'
  })
}
const curLang = ref('zh-Hans')
const changeLang = (str?:string) => {
  curLang.value = str || "en"
  i18n.locale.value = curLang.value
  uni.setLocale(curLang.value)

}

const moudleTest = () => {
  uni.showModal({
    // title: '提示',
    content: 'moudle_test',
  })
}

const testPicker = () => {
  showPicker.value = true
}
const testPicker1 = () => {
  showStartPicker.value = true
}


const copy = () => {
  uni.setClipboardData({
    data: 'test',
    // success: () => {
    //   uni.showToast({
    //     title: '复制成功',
    //     icon: 'none'
    //   })
    // }
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.lang-changer{
  display: flex;

  .lang-item {
    padding: 10px;
    margin: 10px;
  }
  .active {
    color: $uni-color-primary;
    font-weight: bold;
  }
}
</style>
